package com.zh.view.component

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.input.pointer.PointerIcon
import androidx.compose.ui.input.pointer.pointerHoverIcon
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.window.DialogWindow
import androidx.compose.ui.window.rememberDialogState
import com.zh.view.data.AppStore
import com.zh.view.pane.SettingsScreen

/**
 *
 * @author Zhou
 * @date 13:02 2025/6/2
 */

@Composable
fun NavigationSidebar(
    items: List<NavigationItem>,
    selectedItemRoute: String,
    onItemSelected: (String) -> Unit,
    modifier: Modifier = Modifier,
    sidebarWidth: Dp = 200.dp,
    showIconsOnly: Boolean = false // 新增：控制是否只显示图标
) {
    val actualWidth = if (showIconsOnly) 64.dp else sidebarWidth // 图标模式下使用更窄的宽度

    val dialogWindowId = remember { AppStore.dialogWindowId }


    Box(
        modifier = modifier
            .width(actualWidth)
            .background(MaterialTheme.colorScheme.surface)
    ) {
        LazyColumn(
            modifier = Modifier.fillMaxSize(),
            contentPadding = PaddingValues(vertical = 16.dp)
        ) {
            // 导航菜单项
            items(items) { item ->
                if (item.isDivider && !showIconsOnly) { // 只有在非图标模式下显示分隔线
                    HorizontalDivider(
                        modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp),
                        color = MaterialTheme.colorScheme.outlineVariant
                    )
                }
                if (!item.isDivider) {
                    NavigationItem(
                        item = item,
                        isSelected = item.route == selectedItemRoute,
                        showText = !showIconsOnly, // 控制是否显示文本
                        onItemClick = { onItemSelected(item.route) }
                    )
                }
            }

            // 底部空间
            item {
                Spacer(modifier = Modifier.height(32.dp))
            }
        }


        // 底部用户信息
        if (!showIconsOnly) {
            UserProfile(
                modifier = Modifier
                    .align(Alignment.BottomStart)
                    .fillMaxWidth()
                    .padding(12.dp)
                    .clip(RoundedCornerShape(12.dp))
                    .background(MaterialTheme.colorScheme.surfaceVariant)
                    .padding(start = 12.dp, end = 12.dp, top = 8.dp, bottom = 8.dp),
            )
        } else {
            SettingButton(modifier = Modifier
                .align(Alignment.BottomCenter)
                .fillMaxWidth()
                .padding(top = 12.dp, bottom = 12.dp),
            )

        }
    }


    if (dialogWindowId.value.isNotEmpty()) {
        // 动态创建新窗口
        DialogWindow(
            onCloseRequest = { dialogWindowId.value = "" },
            title = "对话框",
            state = rememberDialogState(width = 600.dp, height = 480.dp),
            resizable = false,
            undecorated = false,
            transparent = false,
            focusable = true
        ) {
            SettingsScreen { dialogWindowId.value = "" }
        }
    }
}


@Composable
fun NavigationItem(
    item: NavigationItem,
    isSelected: Boolean,
    showText: Boolean = true,
    onItemClick: () -> Unit,
    modifier: Modifier = Modifier
) {

    val colors = MaterialTheme.colorScheme
    val containerColor = if (isSelected) {
        colors.primaryContainer
    } else {
        colors.surface
    }

    val contentColor = if (isSelected) {
        colors.onPrimaryContainer
    } else {
        colors.onSurfaceVariant
    }

    Box(
        modifier = modifier
            .fillMaxWidth()
            .height(48.dp)
            .padding(horizontal = 8.dp)
            .clip(RoundedCornerShape(12.dp))
            .background(containerColor)
            .pointerHoverIcon(PointerIcon.Hand)
            .clickable(onClick = onItemClick)
    ) {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier
                .fillMaxSize()
                .padding(horizontal = 12.dp)
        ) {

            // 将图标和徽章包装在一个 Box 中
            Box(modifier = Modifier.size(24.dp)) {
                Icon(
                    item.icon,
                    contentDescription = item.title,
                    tint = contentColor,
                    modifier = Modifier.size(24.dp)
                )
                // 红点徽章 - 现在可以使用 TopEnd 对齐
                if (item.badgeCount > 0) {
                    Box(
                        modifier = Modifier
                            .size(8.dp)
                            .clip(CircleShape)
                            .background(MaterialTheme.colorScheme.error)
                            .align(Alignment.TopEnd) // 现在可以正常工作
                    )
                }
            }
            if (showText) {
                Spacer(modifier = Modifier.width(16.dp))
                Text(
                    text = item.title,
                    color = contentColor,
                    fontSize = 14.sp,
                    fontWeight = if (isSelected) FontWeight.Medium else FontWeight.Normal
                )
            }
        }
    }
}

@Composable
fun UserProfile(modifier: Modifier = Modifier) {

    Row(verticalAlignment = Alignment.CenterVertically, modifier = modifier) {
        Image(
            painter = painterResource("images/avatar.jpg"),
            contentDescription = "用户头像",
            modifier = Modifier
                .size(40.dp)
                .clip(CircleShape)
                .border(1.5.dp, MaterialTheme.colorScheme.primary, CircleShape)
        )
        Spacer(modifier = Modifier.width(12.dp))
        Column(modifier = Modifier.weight(1f)) {

            if (AppStore.peerIp.value.isEmpty())
                Text(
                    text = "未连接",
                    color = Color.Gray,
                    fontSize = 14.sp,
                )
            else
                Text(
                    text = "已连接",
                    color = Color(0xFFA5D6A7),
                    fontSize = 14.sp
                )
        }
        SettingButton()
    }

}

@Composable
fun SettingButton(modifier: Modifier=Modifier){
    IconButton(
        modifier = modifier,
        onClick = {
        /* 弹框 */
        AppStore.dialogWindowId.value = "setting"
    }) {
        Icon(
            Icons.Default.Settings,
            contentDescription = "设置",
            tint = MaterialTheme.colorScheme.onSurfaceVariant
        )
    }
}


// 导航菜单项数据类
data class NavigationItem(
    val route: String,
    val title: String,
    val icon: ImageVector,
    val badgeCount: Int = 0,
    val isDivider: Boolean = false
)
